<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 15:10:50
 * @LastEditors: xinghua 3204452042@qq.com
 * @LastEditTime: 2022-12-22 19:45:47
-->
<template>
  <div class="EpidemicDynamic">
    <!-- 疫情数据展示模块 -->
    <div class="epidemicDynamic">
      <!-- 第一个时间模块 -->
      <div class="timeModule">当前时间：{{ new Date() | fmtDate }}</div>
      <!-- 第一个模块展示 -->
      <div class="first">
        <!-- 新增确诊展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.currentConfirmedIncr }}</div>
          <div class="content">新增确诊</div>
          <!-- content里面的内容不变 -->
        </div>
        <!-- 新增治愈展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.curedIncr }}</div>
          <div class="content">新增治愈</div>
        </div>
        <!-- 新增死亡展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.deadIncr }}</div>
          <div class="content">新增死亡</div>
        </div>
      </div>
      <!-- 第二个时间模块 -->
      <div class="timeModule">截至时间：{{ new Date() | fmtDate }}</div>
      <!-- 第二个模块展示 -->
      <div class="second">
        <!-- 现存确诊展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.currentConfirmedCount }}</div>
          <div class="content">现存确诊</div>
        </div>
        <!-- 现有无症状展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.seriousCount }}</div>
          <div class="content">现有无症状</div>
        </div>
        <!-- 累积境外输入展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.suspectedCount }}</div>
          <div class="content">累积境外输入</div>
        </div>
        <!-- 累积确诊展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.confirmedCount }}</div>
          <div class="content">累积确诊</div>
        </div>
        <!-- 累积治愈展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.curedCount }}</div>
          <div class="content">累积治愈</div>
        </div>
        <!-- 累积死亡展示模块 -->
        <div class="box">
          <div class="amount">{{ desc.deadCount }}</div>
          <div class="content">累积死亡</div>
        </div>
      </div>
    </div>
    <!-- 国内病例展示模块 -->
    <div class="inlandCovid">
      <el-table :data="inlandCovid" border style="width: 100%" height="250">
        <el-table-column label="地区" align="center">
          <template slot-scope="scope"
            >{{ scope.row.province + '-' + scope.row.area }}
          </template></el-table-column
        >
        <el-table-column prop="confirmed" label="新增确诊" align="center" />
        <el-table-column prop="suspected" label="新增疑似" align="center" />
        <el-table-column prop="dead" label="新增死亡" align="center" />
        <el-table-column prop="cure" label="新增治愈" align="center" />
        <el-table-column prop="severe" label="境外输入" align="center" />
      </el-table>
    </div>
    <!-- 最新进展展示模块-->
    <div class="latestDev">
      <el-timeline>
        <!-- 在有些组件中找不到方法的话使用.native来添加原生事件 -->
        <el-timeline-item
          v-for="item of latestDev"
          :key="item.id"
          :timestamp="item.publishTime | fmtDate"
          placement="top"
          @click.native="toNewPop(item)"
        >
          <el-card>
            <h4>{{ item.title }}</h4>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- 弹出模态框部分 -->
    <el-dialog
      :title="newTitle"
      :visible.sync="dialogVisible"
      width="70%"
      center
    >
      <div v-html="Content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import axios from 'axios'
// 引入封装时的get请求，如果用到post请求，在get中加上post
import { get } from '@/utils/request'
export default {
  data() {
    return {
      // 疫情数据
      desc: {},
      // 国内病例数据
      inlandCovid: [],
      // 获取新闻信息
      latestDev: [],
      newTitle: '',
      dialogVisible: false,
      Content: ''
    }
  },
  // 创建自动获取的函数
  created() {
    // 让其自动获取疫情数据
    this.getEpidemicDynamicData()
    // 自动执行获取国内病例的数据的方法
    this.getInlandCovidData()
    // 自动执行最新进展模块的方法
    this.getLatestDevData()
  },
  methods: {
    // 疫情数据
    getEpidemicDynamicData() {
      axios({
        // 输入接口的url地址和key
        url: 'http://api.tianapi.com/ncov/index?key=8a114d52a8134ad2885c586c5577ad0f&date=2022-12-05'
      }).then((res) => {
        // console.log(res)
        this.desc = res.data.newslist[0].desc
      })
    },
    // 国内病例
    async getInlandCovidData() {
      // 设置参数，用于获取数据时所要的参数
      const params = {
        page: 1,
        pageSize: 100
      }
      // 用于发送网络请求指令，使用封装后的axious的网络请求
      const res = await get('/epidemic/pageQuery', params)
      console.log(res)
      this.inlandCovid = res.data.list
      const newInlandCovid = []
      this.inlandCovid.forEach((item) => {
        const index = newInlandCovid.findIndex(
          (subItem) =>
            subItem.province === item.province && subItem.area === item.area
        )
        if (index > -1) {
          newInlandCovid[index].confirmed += item.confirmed
          newInlandCovid[index].suspected += item.suspected
          newInlandCovid[index].dead += item.dead
          newInlandCovid[index].cure += item.cure
          newInlandCovid[index].severe += item.severe
        } else {
          newInlandCovid.push(item)
        }
      })
      this.inlandCovid = newInlandCovid
    },
    // 最新进展
    async getLatestDevData() {
      const res = await get('/article/findAll')
      this.latestDev = res.data
    },
    // 添加一个点击弹出模态框方法
    toNewPop(item) {
      this.newTitle = item.title
      this.dialogVisible = true
      this.Content = item.content
    }
  }
}
</script>

<style scoped>
/* 对全部时间样式设置 */
.timeModule {
  margin: 10px 0;
  font-size: 20px;
  color: #999;
}

/* 第一个模块的样式设置 */
.epidemicDynamic .first {
  /* 设置为flex布局，使其在一行中显示 */
  display: flex;

  /* 使其按space-betwwen方式对齐 */
  justify-content: space-between;

  /* 使文本居中显示 */
}

/* 对所有盒子样式设置 */
.box {
  width: 33%;
  height: 120px;
  text-align: center;
  background-color: #effaff;
  border-radius: 5px;
}

/* 对模块中的盒子中的数据进行样式 */
.box .amount {
  margin: 30px 0 10px;
  font-size: 22px;
  font-weight: bold;
}

/* 对第二个模块进行设置 */
.epidemicDynamic .second {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.second .box {
  margin-bottom: 8px;
  background-color: #fbf5f0;
}

.latestDev {
  margin: 20px 0 0 -40px;
}
</style>
